<!--Child子级组件-->
<template>
  <h3>Child子级组件</h3>
  <h3>父级传过来的msg:{{msg}}</h3>
  <button @click="updateParentMsg1">修改父级组件中的数据</button>
</template>
<script lang="ts">
// 引入定义组件的api
import { defineComponent } from 'vue'
// 定义组件并暴露
export default defineComponent({
  name: 'Child',
  props: ['msg'],
// props仍然是一个代理对象,内部有父级组件向子级组件传递进来的数据
// props参数中的数据是否存在,要看当前的子级组件是否曾经使用props进行接收
// 父级组件传入进来的数据,第一要通过props进行接收,虽然接收了,数据在组件的实例对象中,但是setup执行的时候,内部是没有this的
// console.log(props)
// context中有attrs对象,存储的是父级组件向子级组件传入进来的数据,但是这个数据没有使用props进行接收,相当于vue2.x中的this.$attrs属性
// console.log(context)
// context.emit('xxx','嘎嘎')
// console.log('setup执行了',this) // this是undefined,原因:setup执行的时候,组件实例对象还没创建
  setup(props, context) {
    // 用来获取父级组件传递过来的数据,需要子级组件使用props进行接收
    console.log(props.msg)
    // 用来获取父级组件传递过来的数据,没有使用props接收的数据
    console.log(context.attrs.msg1)
    // 按钮点击事件的回调函数,内部分发父级组件传递过来的自定义事件
    const updateParentMsg1 = () => {
      context.emit('updateMsg', '真香啊')
    }
    return {
      updateParentMsg1
    }
  }
})

/*
setup执行的时机
在beforeCreate之前执行(一次), 此时组件对象还没有创建
this是undefined, 不能通过this来访问data/computed/methods / props
其实所有的composition API相关回调函数中也都不可以
setup的返回值
一般都返回一个对象: 为模板提供数据, 也就是模板中可以直接使用此对象中的所有属性/方法
返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性
返回对象中的方法会与methods中的方法合并成功组件对象的方法
如果有重名, setup优先
注意:
一般不要混合使用: methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods
setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性数据(暂且这么理解,后期会有不同的解释)
vue3.x中组件的实例对象this其实也是一个Proxy类型的代理对象
setup(props, context) / setup(props, {attrs, slots, emit})
props: 包含props配置声明且传入了的所有属性的对象
attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs
slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
emit: 用来分发自定义事件的函数, 相当于 this.$emit

*/
</script>
